<template>
  <div>
    <div>
      <el-row class="wh-box">
        <el-col :span="8" class="by-center" style="height: 100%;border-right: 1px solid #e6e6e6;">
          <svg-icon class="wh-box-icon" :icon-class="data.icon" style="font-size: 70px"></svg-icon>
        </el-col>
        <el-col :span="16" style="height: 100%">
          <div class="wh-box-name" style="height: 20px;line-height: 28px;text-align: center">{{data.name}}</div>
          <hr style="border: .5px solid #e6e6e6;">
          <div class="wh-box-number" style="text-align: center;font-size: 30px">{{data.number}}</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default{
    name: 'box',
    props: {
      data: {
        type: Object,
        default: function() {
          return {
            name: '',
            icon: '',
            number: ''
          }
        }
      }
    },
    data() {
      return {
        data123: ''
      }
    }
  }
</script>

<style type="text/scss" scoped>
  .wh-box{
    border: 2px solid #e6e6e6;
    height: 80px;
    .wh-box-name{
      height: 30px;
      line-height: 30px;
    }
  }
</style>
